<template>
  <WebHeader />
  <div class="container">
    <div class="left" :style="{
               maxWidth: isExpanded ? '0px' : '260px',
                transition: 'max-width 0.8s ease', // 添加过渡动画 // 60px 是默认一行的高度
              }">
      <CollapseRankingTemplate :title="'主编单位排名(' + zhutotal + ')'" :dataList="zhubianlist"></CollapseRankingTemplate>
      <CollapseRankingTemplate :title="'参编单位排名(' + canbtotal + ')'" :dataList="canbianlist"></CollapseRankingTemplate>
      <CollapseRankingTemplate :title="'起草人员排名(' + qicatotal + ')'" :dataList="qicaolist"></CollapseRankingTemplate>
      <CollapseRankingTemplate :title="'审查人员排名(' + shentotal + ')'" :dataList="shenchaolist"></CollapseRankingTemplate>
    </div>

    <div class="shou" @click="toggleExpand">
      <img src="@/assets/imgs/zuo.png" alt="" :style="{
                  width: '25px',
                  height: '25px',
                  transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
                  transition: 'transform 0.7s ease',
                }">
    </div>
    <div class="right">
      <newSelection @updateArray="handleUpdate"></newSelection>
    </div>

  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from "vue";

  import WebHeader from "@/components/header/index.vue";
  import CollapseRankingTemplate from "./components/collapseRankingTemplate.vue";
  import newSelection from "./components/newSelection.vue";

  import { useRouter } from "vue-router";
  const router = useRouter();

  const zhubianlist = ref<any[]>([]);
  const canbianlist = ref<any[]>([]);
  const qicaolist = ref<any[]>([]);
  const shenchaolist = ref<any[]>([]);

  // 表格操作
  interface User {
    id: Number | String;
    date: string;
    name: string;
    address: string;
  }

  interface searchParam {
    text: String;
    key: String | Number;
    date: String;
    pageNum: string;
    pageSize: string;
    total: Number;
  }
  const zhutotal = ref(0);
  const canbtotal = ref(0);
  const qicatotal = ref(0);
  const shentotal = ref(0);
  const handleUpdate = (param: any) => {
    zhubianlist.value = param.mainEditorUnitCount;
    canbianlist.value = param.participatingUnitCount;
    qicaolist.value = param.mainDrafterCount;
    shenchaolist.value = param.reviewerCount;
    zhutotal.value = sumValues(param.mainEditorUnitCount, "value");
    canbtotal.value = sumValues(param.participatingUnitCount, "value");
    qicatotal.value = sumValues(param.mainDrafterCount, "value");
    shentotal.value = sumValues(param.reviewerCount, "value");
  };

  const sumValues = (array, key) => {
    return array.reduce((total, item) => total + (Number(item[key]) || 0), 0);
  };

  onMounted(() => {
    //initData();
  });

    const isExpanded = ref(false);
  const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
  };

</script>
<style lang="scss" scoped>
.container {
  display: flex;
  /* 启用 flex 布局 */
  flex-direction: row;
  /* 横向排列（默认值，可省略） */
  height: 100%;
  /* 高度为 100% */
  width: 100%;
  /* 宽度为 100% */
  background-color: #f0f0f0;
  // gap: 15px;


}

.shou {
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.shou img {
  width: 25px;
  height: 25px;
}

.left {
  flex: 0 0 15%;
  background-color: #fff;
  overflow: hidden;

  transition: max-width 1s ease
}

.right {
  flex: 1;
  // height: 100%;
  height: calc(100vh - 60px);
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

}

.middle {
  flex-grow: 1;
  padding: 0 1.5rem;
  // background-color: #e0e0e0;
}
</style>
